.landing-ui-field-color-preset {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin-left: -1.5px;
	margin-right: -1.5px;
	margin-bottom: 3px;
}

.landing-ui-field-color-preset-item {
	position: relative;
	margin: 1.5px;
	box-shadow: 0 0 4px rgba(128, 128, 128, .1);
	border: 1px solid rgba(0, 0, 0, .05);
	border-radius: 2px;
	cursor: pointer;
	transition: box-shadow 200ms ease;
}
/*gradient with transparent border not work*/
.landing-ui-field-color-gradient-preset-container .landing-ui-field-color-preset-item {
	border: none;
}

.landing-ui-field-color-preset-item:hover:not('.landing-ui-field-color-preset-preview-mode') {
	box-shadow: 0 0 3px rgba(0, 0, 0, .4);
}

.landing-ui-field-color-preset-item::after {
	content: '';
	display: block;
	padding-bottom: 100%;
}


.landing-ui-field-color-preset-item.active:before {
	content: '';
	position: absolute;
	right: -4px;
	bottom: -3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23FFF' width='14.819' height='14.819' rx='7.409'/%3E%3Cpath fill='%232FC6F6' d='M6.593 8.333l4.19-4.141 1.39 1.44-5.559 5.56-.021-.023-.022.023-3.398-3.415 1.39-1.44z'/%3E%3C/g%3E%3C/svg%3E");
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.11);
}

.landing-ui-field-color-preset.landing-ui-field-color-preset-preview-mode {
	margin: 2px;
}

.landing-ui-field-color-preset.landing-ui-field-color-preset-preview-mode.active {
	outline: 1px solid rgba(255, 255, 255, .75);
	box-shadow: 0 0 10px red;
}

.landing-ui-field-color-presets-left {
	display: flex;
	align-items: center;
}

.landing-ui-field-color-presets-left .landing-ui-field-color-presets-title {
	margin-right: 5px;
}
